import React from 'react'
import {Col, Row,Select,Checkbox,Button} from "antd";

import {WeaLocaleProvider,WeaColorPicker,WeaSearchGroup} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
import {WeaMaterialLib} from 'weaPortalPublic';

export default class AddExtendGroup extends React.Component{

    render(){
        const {setting,setSetting={},defaultValue} = this.props
        const {color,e7Bgi='',e7Silder=''} = setting
        return (
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@e95ryz`}  title={getLabel(1014, '样式')} needTigger={true} showGroup={true}>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2eb5u1`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@57tcua`} span={6} >
                            <div className="item-title">{getLabel(387894,"文字及图标颜色")} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@davb46`} span={18}>
                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@k3by5j`} value={color} onChange={color => setSetting({color})} />
                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1r3k2b`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ksvc9m`} span={6} >
                            <div className="item-title">{getLabel(517127, '背景图片')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fl0832`} span={5}>
                            <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@bazl3g`} multiCheck={false} onChange={e7Bgi => setSetting({e7Bgi})} type='button'>
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lx0spx`} type="primary" title={getLabel(387747, '从素材库中选择')} style={{"width":116,"overflow":"hidden","text-overflow":"ellipsis"}}>{getLabel(387747, '从素材库中选择')}</Button>
                            </WeaMaterialLib>

                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6uhapx`} span={4}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1ijelt`} type="primary" title={getLabel(32757,'恢复默认')} style={{"width":80,"overflow":"hidden","text-overflow":"ellipsis"}} onClick={e =>{setSetting({e7Bgi:defaultValue.e7Bgi})}}>{getLabel(32757,'恢复默认')}</Button></Col>
                    </Row>
                </div>
                <div className='e7Bgi-show'>
                    <img src={e7Bgi}/>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@eoyw4c`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@b9rn43`} span={6} >
                            <div className="item-title">{getLabel(517128, '轮播图')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bstu8d`} span={5}>
                            <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@04s4dy`} multiCheck={true} onChange={e7Silder => setSetting({e7Silder})} type='button'>
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hpw6fb`} type="primary" title={getLabel(387747, '从素材库中选择')} style={{"width":116,"overflow":"hidden","text-overflow":"ellipsis"}}>{getLabel(387747, '从素材库中选择')}</Button>
                            </WeaMaterialLib>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@s8bnue`}  span={4}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@b108pt`} type="primary" title={getLabel(32757,'恢复默认')} style={{"width":80,"overflow":"hidden","text-overflow":"ellipsis"}} onClick={e =>{setSetting({e7Silder:defaultValue.e7Silder})}}>{getLabel(32757,'恢复默认')}</Button></Col>
                    </Row>
                </div>
                <div className='e7Slider-show'>
                    {
                        e7Silder.split(",").map((item,index)=>{
                            return <img src={item}/>
                        })
                    }
                </div>
            </WeaSearchGroup>
        )
    }
}